<!-- <template>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :hideRequiredMark="true">
        <a-form-item  label="手机号" v-bind="validateInfos.userName" class="one1">
            <a-input placeholder="请输入手机号"  v-model:value="modelRef.userName" @blur="validate('userName', { trigger: 'blur' }).catch(() => { })" />
        </a-form-item>
        <a-form-item  name="password" v-bind="validateInfos.password" class="one2"
            @blur="validate('password', { trigger: 'blur' }).catch(() => { })">
            <a-row >
              <a-col class="input2" >
            <a-input-password class="input2"  placeholder="请输入手机号验证码" v-model:value="modelRef.password" />
              </a-col>
              <a-col >
                <a-button type="primary" class="btn"
                  ><span v-show="show" @click="Verification">获取验证码</span>
                  <span v-show="!show" class="count"
                    >{{ count }} s 后获取</span
                  ></a-button
                >
              </a-col>
            </a-row>
        </a-form-item>
        <a-form-item v-bind="validateInfos.captcha" class="one2">
            <a-input  placeholder="请输入验证码" v-model:value="modelRef.captcha" @blur="validate('auth', { trigger: 'blur' }).catch(() => { })"
                class="inputauth" />
            <img :src="src" alt="" class="authimg" @click="fun1">
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 5 }">
            <a-button type="primary" @click.prevent="onSubmit">登录</a-button>
        </a-form-item>
    </a-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw, computed, ref, onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { AuthCode, LoginData } from '@/api/login'
import { useRouter } from 'vue-router'
const useForm = Form.useForm;
interface modelRef{
    [key:string]:any
}
export default defineComponent({
    setup(props, ctx) {
         //@ts-ignore 忽略ts检查
         let arr = ref(JSON.parse(localStorage.getItem('acl')))
        const modelRef:modelRef = reactive({
            userName: '',
            password: '',
            captcha: "",
            key: '',
            src: "",
            jwt: '',
            acl: arr.value
        });
        let src = ref('')
        const router = useRouter()
        //定义验证码的点击切换
        const fun1 = () => {
            CaptchaData()
        }
        const rulesRef = reactive({
            userName: [
                {
                    required: true,
                    pattern:/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
                    message: "请输入正确的手机号",
                    trigger: 'blur',
                }
            ],
            password: [
                {
                    required: true,
                    message: '请输入正确的验证码',
                    pattern: /^\d+$/,
                    trigger: 'blur',
                    min: 8,
                }
            ],
            auth: [
                {
                    required: true, message: '请输入正确的图片验证码',
                }
            ]
        });
        //获取验证码图片
        const CaptchaData = () => {
            AuthCode().then(res => {
                //@ts-ignore 忽略ts检查
                src.value = res.img
                //@ts-ignore 忽略ts检查
                modelRef.key = res.key
                // console.log(res);
                modelRef.src = src.value
            })
        }
        const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
        const onSubmit = () => {
            validate()
                .then(() => {
                    LoginData(modelRef).then(res => {
                        modelRef.jwt =JSON.stringify(localStorage.getItem('jwt'))
                        //@ts-ignore 忽略ts检查
                        modelRef.captcha = res.captcha
                        //@ts-ignore 忽略ts检查
                        if (modelRef.jwt == JSON.stringify(localStorage.getItem('jwt')) ) {
                            router.push('/layout/home')
                        } else {
                            modelRef.captcha = ''
                            CaptchaData()
                        }
                    })
                })
                .catch((err: any) => {
                    console.log('error', err);
                });
        };
        //手机号验证码
        const show = ref(true);
      const timer = ref();
      const TIME_COUNT = ref(5);
      const count = ref();
      const  two = ref(1)
       //@ts-ignore 忽略ts检查
      //点击发送验证码
      const Verification = () => {
        if(modelRef.userName !== ''){
            modelRef.password = ''
              if (!timer.value) {
                 //@ts-ignore 忽略ts检查
                    count.value = TIME_COUNT.value;
                    show.value = false;
                        timer.value = setInterval(() => {
                        if (count.value > 0 && count.value <= TIME_COUNT.value) {
                        count.value--;
                        //   console.log("count----", count);
                         //@ts-ignore 忽略ts检查
                        if(modelRef.password  == ''){
                          var one=  setTimeout(() => {
                            //@ts-ignore 忽略ts检查
                            modelRef.password = Math.floor(Math.random()*(10000-1000)+1000)
                            // console.log('modelRef.password',modelRef.password);
                            two.value++
                            console.log('two.value',two.value);
                            
                           }, 400);
                           }
                        //    if(two.value == 2){
                        //            //@ts-ignore 忽略ts检查
                        //           clearTimeout(one)
                        //    }
                        } else {
                        show.value = true;
                        clearInterval(timer.value);
                        timer.value = null;
                        }
                        
                    }, 1000);
                      //@ts-ignore 忽略ts检查
        }
        alert("已发送，请注意查收");
        }else{
             alert("请先输入手机号")
        }

      };
        onMounted(() => {
            CaptchaData()
        })
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            validate,
            validateInfos,
            resetFields,
            modelRef,
            src,
            show,
            timer,
            TIME_COUNT,
            count,
            Verification,
            onSubmit,
            fun1,
        };
    },
});
</script>
<style scoped lang="less">
.one1 {
    margin-top: 0px;
    margin-left: 60px;
}

.one2 {
    margin-left: 60px;
}
.input2{
  width: 200px;   
  margin-left: 10px;
}
.ant-btn[data-v-de209d72]{
     width: 109px;
     margin-left: -4px;
}
.inputauth {
    position: absolute;
    top: 0px;
    left: 25px;
    width: 205px;
}

.ant-row ant-form-item {
    text-align: center;
}

.ant-btn {
    margin: 0px -25px;
    background-color: #1890ff;
    position: absolute;
    top: 0px;
    left: 15px;
    color: black;
    width: 295px;
}

.ant-btn:hover {
    background-color: rgb(255, 0, 247);
    color: rgb(246, 222, 5);
}

.authimg {
    position: absolute;
    right: -73px;
    top: 0px;
    width: 100px;
}
</style> -->
<template>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" :hideRequiredMark="true">
        <a-form-item label="手机号" v-bind="validateInfos.userName" class="one1">
            <a-input placeholder="请输入手机号" v-model:value="modelRef.userName" />
        </a-form-item>
        <a-form-item label="后六位" v-bind="validateInfos.password" class="one2">
            <a-row>
                <a-col class="input2">
                    <a-input-password class="input2" placeholder="请输入手机号后六位" v-model:value="modelRef.password" />
                </a-col>
            </a-row>
        </a-form-item>
        <a-form-item v-bind="validateInfos.captcha" class="one2" style="margin-left: 35px;">
            <a-input placeholder="请输入验证码" v-model:value="modelRef.captcha"
                @blur="validate('auth', { trigger: 'blur' }).catch(() => { })" class="inputauth" />
            <img :src="src" alt="" class="authimg" @click="cut">
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 5 }">
            <a-button type="primary" @click.prevent="onSubmit">登录</a-button>
        </a-form-item>
    </a-form>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw, computed, ref, onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { useRouter } from 'vue-router'
import { AuthCode, LoginData, jwtPreCheck } from '@/api/login'
const useForm = Form.useForm;
interface modelRef {
    [key: string]: any
}
export default defineComponent({
    setup(props, ctx) {
        const modelRef: modelRef = reactive({
            userName: '',
            password: '',
            captcha: "",
            key: '',
            src: "",
            jwt: '',
        });
        let src = ref('')
        const router = useRouter()
        const rulesRef = reactive({
            userName: [
                {
                    required: true,
                    // pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
                    message: "请输入正确的手机号",
                    trigger: 'blur',
                }
            ],
            password: [
                {
                    required: true,
                    message: '请输入正确的验证码',
                    pattern: /^\d+$/,
                    trigger: 'blur',
                    min: 8,
                }
            ],
            auth: [
                {
                    required: true, message: '请输入正确的图片验证码',
                }
            ]
        });
        let acl = []
        let jwt1 = ref('')
        let jwt2 = ref('')
        const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
        const onSubmit = () => {
            validate()
                .then(() => {
                    LoginData(modelRef).then(res => {
                      /*   //@ts-ignore 忽略ts检查
                        jwt1.value = res.context.jwt */
                        //@ts-ignore 忽略ts检查
                        modelRef.jwt = res.context.jwt
                      /*   //@ts-ignore 忽略ts检查
                        jwt2.value =  modelRef.jwt */
                        //@ts-ignore 忽略ts检查
                        console.log('modelRef.jwt',res.context.jwt);
                        //@ts-ignore 忽略ts检查
                        localStorage.setItem('jwt', res.context.jwt)
                        //@ts-ignore 忽略ts检查
                        acl = res.context.acl
                        modelRef.arr = acl
                        console.log('modelRef.arr', modelRef.arr);
                        resetFields()
                        immediately()
                        router.push('/layout/home')
                        /* //@ts-ignore 忽略ts检查
                        if (res.errNo == 0) {
                            jwtPreCheck().then(res => {
                               
                                // //@ts-ignore 忽略ts检查
                                // if (jwt1.value = jwt2.value) {
                                //     router.push('/layout/home')
                                // } else {
                                //     alert("请输入正确的账号和密码")
                                // }
                            })
                        } */
                    })
                })
                .catch((err: any) => {
                    console.log('error', err);
                });
        };
        //手机号验证码
        const show = ref(true);
        const timer = ref();
        const TIME_COUNT = ref(3);
        const count = ref();

        //   //点击发送验证码
        //   const Verification = () => {
        //     if(modelRef.userName !== ''){
        //         modelRef.password = ''
        //           if (!timer.value) {
        //              //@ts-ignore 忽略ts检查
        //                 count.value = TIME_COUNT.value;
        //                 show.value = false;
        //                     timer.value = setInterval(() => {
        //                     if (count.value > 0 && count.value <= TIME_COUNT.value) {
        //                     count.value--;
        //                      //@ts-ignore 忽略ts检查
        //                     if(modelRef.password  == ''){
        //                       var one=  setTimeout(() => {
        //                         //@ts-ignore 忽略ts检查
        //                         modelRef.password = Math.floor(Math.random()*(1000000-100000)+1000)
        //                         console.log('modelRef.password',modelRef.password);
        //                        }, 400);
        //                        }
        //                     } else {
        //                     show.value = true;
        //                     clearInterval(timer.value);
        //                     timer.value = null;
        //                     }              
        //                 }, 1000);
        //     }
        //     var one=  setTimeout(() => {
        //                         //@ts-ignore 忽略ts检查
        //                         modelRef.password = Math.floor(Math.random()*(1000000-100000)+1000)
        //                         console.log('modelRef.password',modelRef.password);
        //                        }, 400);
        //     alert("已发送，请注意查收")
        //     }else{
        //          alert("请先输入手机号")
        //     }
        //   }
        const immediately = () => {
            AuthCode().then(res => {
                //  console.log('res',res);
                //@ts-ignore 忽略ts检查
                src.value = res.img
                //@ts-ignore 忽略ts检查
                modelRef.key = res.key
            })
        }
        //验证码切换图片
        const cut = () => {
            immediately()
        }
        onMounted(() => {
            immediately()
        })
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            validateInfos,
            modelRef,
            src,
            show,
            count,
            // Verification,
            validate,
            resetFields,
            onSubmit,
            cut
        };
    },
});
</script>
<style scoped lang="less">
.one1 {
    margin-top: 0px;
    margin-left: 60px;
}

.one2 {
    margin-left: 60px;
}

.input2 {
    width: 258px;
    margin-left: 0px;
}

.ant-btn[data-v-de209d72] {
    width: 109px;
    margin-left: -4px;
}

.inputauth {
    position: absolute;
    top: 0px;
    left: 45px;
    width: 190px;
}

.ant-row ant-form-item {
    text-align: center;
}

.ant-btn {
    margin: 0px -25px;
    background-color: #1890ff;
    position: absolute;
    top: 0px;
    left: 15px;
    color: black;
    width: 295px;
}

.ant-btn:hover {
    background-color: rgb(255, 0, 247);
    color: rgb(246, 222, 5);
}

.authimg {
    position: absolute;
    right: -83px;
    top: -3px;
    width: 120px;
    height: 35px;
}
</style>